<!-- 我的表格 -->

<template>
  <div class="DetailMonitor-MyTable">
    <div class="flexCC">
      <div class="flex12"><b>参数类型</b></div>
      <div class="flex13"><b>实时数据</b></div>
    </div>

    <EasyScroll :height="500">
      <div v-if="one.yxzt" class="flexCC" :class="{ 'DetailMonitor-MyTable-active': one.yxzt.code === infoParam.code }">
        <div class="flex12 ellips" @click="toChart(one.yxzt)">{{ one.yxzt.name }}</div>
        <div class="flex13">
          <FormSwitch
            v-if="one.yxzt.valueType === 5"
            v-bind="getBoolProps(one.yxzt)"
            trueText="运行"
            falseText="停止"
            :switchWidth="64"
            @change="toSubmit(one.yxzt)"
          />
          <div v-else>
            <div v-if="one.yxzt.value === 2" class="InfoColor">停止</div>
            <div v-else class="SuccessColor">运行</div>
          </div>
        </div>
      </div>

      <div v-if="one.gzzt" class="flexCC" :class="{ 'DetailMonitor-MyTable-active': one.gzzt.code === infoParam.code }">
        <div class="flex12 ellips" @click="toChart(one.gzzt)">{{ one.gzzt.name }}</div>
        <div class="flex13">
          <FormSwitch
            v-if="one.gzzt.valueType === 5"
            v-bind="getBoolProps(one.gzzt)"
            trueText="正常"
            falseText="故障"
            :switchWidth="64"
            @change="toSubmit(one.gzzt)"
          />
          <div v-else>
            <div v-if="one.gzzt.value === 1" class="DangerColor">故障</div>
            <div v-else class="InfoColor">正常</div>
          </div>
        </div>
      </div>

      <div v-if="one.sbqt" class="flexCC" :class="{ 'DetailMonitor-MyTable-active': one.sbqt.code === infoParam.code }">
        <div class="flex12 ellips" @click="toChart(one.sbqt)">{{ one.sbqt.name }}</div>
        <div class="flex13">
          <FormSwitch
            v-if="one.sbqt.valueType === 5"
            v-bind="getBoolProps(one.sbqt)"
            trueText="自动"
            falseText="手动"
            :switchWidth="64"
            @change="toSubmit(one.sbqt)"
          />
          <div v-else>
            <div v-if="one.sbqt.value === 1" class="InfoColor">手动</div>
            <div v-else class="InfoColor">自动</div>
          </div>
        </div>
      </div>

      <div
        v-for="item in one.propList"
        :key="item.code"
        class="flexCC"
        :class="{ 'DetailMonitor-MyTable-active': item.code === infoParam.code }"
      >
        <div class="flex12 ellips" @click="toChart(item)">{{ item.name }}</div>
        <div class="flex13">
          <FormSwitch v-if="item.valueType === 5" v-bind="getBoolProps(item)" @change="toSubmit(item)" />
          <FormNum v-else-if="[1, 2].includes(item.valueType)" v-bind="getIntProps(item)" @change="toSubmit(item)" />
          <FormNum v-else-if="[3, 4].includes(item.valueType)" v-bind="getFloatProps(item)" @change="toSubmit(item)" />
          <FormSelect
            v-else-if="[11].includes(item.valueType)"
            v-bind="getSelectProps(item)"
            @change="toSubmit(item)"
          />
          <div v-else class="ellips">{{ item.value || '-' }}{{ item.unit }}</div>
        </div>
      </div>

      <el-empty v-if="!infoParam.code" description="暂无参数" />
    </EasyScroll>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MyTable',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb(), CORE.mixInfo()],

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 切换图表
     */
    toChart({ code }) {
      this.infoParam.code = code
      this.startInfo()
    },

    /**
     * 属性操作
     */
    toSubmit({ code, name, value }) {
      const newValue = this.one[`${code}Value`]
      if (CORE.isEmpty(newValue) || newValue === value) return

      this.MAP.tipSubmit = `设置${name}`
      this.one.tag = code
      this.one.status = newValue
      this.startSubmit()

      // 还原数值，待提交成功后再更新
      // this.one[`${code}Value`] = value
    },

    /**
     * 获取真假属性
     */
    getBoolProps({ code, readonly }) {
      return {
        bind: `${code}Value`,
        trueValue: '1',
        falseValue: '0',
        noLabel: true,
        disabled: readonly !== 1,
        onlyShow: readonly !== 1,
        mini: true,
      }
    },

    /**
     * 获取整型属性
     */
    getIntProps({ code, unit, readonly }) {
      return {
        bind: `${code}Value`,
        string: true,
        rightBtn: true,
        noLabel: true,
        noTip: true,
        suffix: unit,
        disabled: readonly !== 1,
        onlyShow: readonly !== 1,
        mini: true,
      }
    },

    /**
     * 获取浮点属性
     */
    getFloatProps(item) {
      return {
        ...this.getIntProps(item),
        dec1: true,
      }
    },

    /**
     * 获取下拉属性
     */
    getSelectProps({ code, unit, readonly, valueTypeCfg }) {
      const dict = JSON.parse(valueTypeCfg || '[]').map(({ value, name }) => [`${value}`, name])
      return {
        bind: `${code}Value`,
        dict,
        noLabel: true,
        noTip: true,
        suffix: unit,
        disabled: readonly !== 1,
        onlyShow: readonly !== 1,
        mini: true,
      }
    },
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
